<template>
  <VDialog @close="handleClose" @save="save" :loading="loading">
    <template #content>
      <div>
        <el-form
          ref="formRef"
          :model="formValues"
          :rules="rules"
          label-width="95px"
          label-position="top"
        >
          <el-form-item label="币种名称" prop="currency">
            <el-input
              v-model.trim="formValues.currency"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item label="币种简称" prop="currencyShort">
            <el-input
              v-model.trim="formValues.currencyShort"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item label="实时汇率">
            <el-input-number
              disabled
              v-model="formValues.exchangeRate"
              clearable
              style="width: 100%"
              :controls="false"
            />
          </el-form-item>
          <el-form-item label="自定义汇率" prop="customizeExchangeRate">
            <el-input-number
              v-model="formValues.customizeExchangeRate"
              placeholder="请填写对人民币汇率"
              clearable
              style="width: 100%"
              :controls="false"
            />
          </el-form-item>
          <el-form-item label="财务汇率">
            <el-input-number
              v-model="formValues.financeExchangeRate"
              placeholder="请填写对人民币汇率"
              clearable
              style="width: 100%"
              :controls="false"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="formValues.state"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-form>
      </div>
      <div>说明:系统每天定时同步中国银行的实时汇率</div>
    </template>
  </VDialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { addRate, editRate } from "../api.js";
const props = defineProps({
  data: { type: Object, default: () => {} },
});
const rules = reactive({
  currency: [{ required: true, message: "请输入币种名称", trigger: "blur" }],
  currencyShort: [
    { required: true, message: "请输入币种简称", trigger: "blur" },
  ],
  customizeExchangeRate: [
    { required: true, message: "请输入自定义汇率", trigger: "blur" },
  ],
});
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const formValues = ref({
  id: null,
  currency: null,
  currencyShort: null,
  exchangeRate: null,
  customizeExchangeRate: null,
  financeExchangeRate: null,
  state: 1,
});
const formRef = ref();

watch(
  () => props.data,
  (val) => {
    if (val) {
      for(let key in formValues.value) {
        formValues.value[key] = val[key];
      }
    }
  }
);

const save = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        loading.value = true;
        const { code, message } = await (formValues.value?.id
          ? editRate
          : addRate)(formValues.value);
        if (code !== 200) return;
        ElMessage.success(formValues.value?.id?"编辑成功":"添加成功");
        handleClose(true);
      } catch (error) {
      } finally {
        loading.value = false;
      }
    }
  });
};

const handleClose = async (refresh) => {
  formValues.value = {
    id: null,
    currency: null,
    currencyShort: null,
    exchangeRate: null,
    customizeExchangeRate: null,
    financeExchangeRate: null,
    state: 1,
  };
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
